<template>
	<view class="container">
		<view class="header-group">
			<u-tabs :list="list" :lineHeight="'6rpx'" :lineWidth="'60rpx'" :itemStyle="{width:'250rpx',height: '80rpx'}"
				@change="tabsClick"></u-tabs>
		</view>
		<view class="content">
			<business v-model='totalPriceVal' v-if="active==0" @submit='submit' ref="Form">

			</business>
			<accumulation v-model='totalPriceVal' v-if="active==1" @submit='submit' ref="Form">

			</accumulation>
			<group v-if="active==2" @submit='submit' ref="Form">

			</group>
		</view>
		<view class="" style="height: 200rpx;">
		</view>
		<view class="bottomBtnContainer">
			<view class="recordWrapper" @click="gotoRecord">
				<view class="icon">
					
				</view>
				历史记录
			</view>
			<button style="width: 550rpx;" class="bottomBtnWrapper" @tap="save">开始计算</button>
		</view>
	</view>
</template>

<script>
	import business from './business.vue'
	import accumulation from './accumulation.vue'
	import group from './group.vue'
	export default {
		components: {
			business,
			accumulation,
			group
		},
		data() {
			return {
				list: [{
						name: '商业贷款',
					},
					{
						name: '公积金贷款',
					},
					{
						name: '组合贷款',
					},
				],
				active: 0,
				totalPriceVal: '',
			}
		},
		created() {
			console.log("totalPrice", this.totalPrice)
		},

		props: {
			totalPrice: {
				type: String,
				default: ''
			},
		},
		watch: {
			totalPrice: {
				handler: function observer(val) {
					this.totalPriceVal = val
				},
				immediate: true
			}
		},
		computed: {

		},
		methods: {
			submit(obj) {
				console.log("submit", obj)
				this.$emit('submit', obj)
			},
			tabsClick(item) {
				// console.log("tabsClick", item)
				var index = item.index
				this.active = index
			},

			save() {
				this.$refs.Form.submit()
			},
			gotoRecord(){
				uni.navigateTo({
					url: '/pages/calculator/record/index'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>


<style lang="scss" scoped>
	.container {
		width: 100vw;

		.header-group {
			display: flex;
			justify-content: center;
			width: 100%;
			margin-bottom: 20rpx;
			background-color: #FFFFFF;
		}

		.content {
			// padding: 30rpx;
			width: 100%;
		}
	}
	
	.recordWrapper{
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 20rpx;
		line-height: 30rpx;
		color: #888;
		margin-right: 50rpx;
		.icon{
			width: 30rpx;
			height: 30rpx;
			background-image: url(@/static/image/icon_tool_2.png);
		}
	}


</style>